require(['config'], function () {
    require(['jquery'], function () {
        require(['lazyload'], function () {
            $('#footer').load('footer.html');
            require(['jquery-cookie'], function () {
                function init() {
                    //轮播图元素
                    this.$banner = $('.bannerSlider');
                    this.$btnlist = $('.bannerSlider .bDot ul li');
                    this.$arrowLeft = $('.prev');
                    this.$arrowRight = $('.next');
                    // 顶部悬浮元素
                    this.$header = $('.header');
                    // 楼梯效果元素
                    this.$floorwrap = $('#floor');
                    this.$floorguide = $('.floor-guide');
                    this.$goTop = $('.goTop');
                    this.$floorguideli = $('.floor-guide .floorNav a');
                    //顶部工具栏元素
                    this.$topfrli = $('.topNav .fr li');
                    this.$topflli = $('.topNav .fl li');
                    this.$citylist = $('.cityList');
                    this.$citytab = $('.cityTab');
                    this.$cityname = $('.cityName');
                    this.$citytag = $('.citytag');
                    //导航菜单元素
                    this.$catatit = $('.catalogsTitle');
                    this.$cataitem = $('.catalogsList .item');
                    //购物车元素
                    this.$shoppingcart = $('.shoppingCart');
                    this.$shoppinglist = $('.shoppingList');
                    this.$totlenum = $('.totleNum');
                    this.$totleprice = $('.totlePrice');
                    this.$shopbtn=$('.shoppingBtn a');

                    let _this = this;
                    // ajax配置
                    const phpurl = 'http://10.31.155.44/02/yiguo/php/';
                    // const phpurl = ' http://10.31.155.44/02/git/fkc/yiguo/php/';

                    // 渲染
                    //楼层数组
                    const floorarr = ['fruit', 'ch', 'sea', 'meat', 'egg', 'oil', 'milk', 'drink', 'fast'];
                    //渲染轮播图和楼层
                    this.indexrender = function () {
                        $.ajax({
                            url: phpurl + 'goodlist.php',
                            dataType: 'json'
                        }).done(function (database) {
                            // 轮播图渲染
                            let data = database[0];
                            let strhtml = '<ul class="bSlider">';
                            for (let value of data) {
                                strhtml += `
                            <li><a href="javascript:;">
                                <img src="${value.url}" alt="${value.alt}">
                            </a></li>
                            `;
                            }
                            strhtml += '</ul>';
                            _this.$banner.children('.main').html(strhtml);
                            _this.slide();

                            // 楼层渲染
                            data = database[1];
                            strhtml = '';
                            for (let i = 0; i < floorarr.length; i++) {
                                let value = floorarr[i];
                                strhtml += `<section class="floor main clearfix t0${i + 1}_channelhome">`;
                                let countnum = 0;
                                let strinner = '';
                                let floortitleurl = '';
                                let floortitle = '';
                                let floorstitle = null;
                                let floortaga = '';
                                for (let val of data) {
                                    // console.log(1);
                                    if (val.type === value + '_a') {
                                        floortitleurl = val.url;
                                        floortitle = val.title;
                                        floorstitle = val.stitle;
                                        floorstitle = floorstitle.split(',');
                                        for (let i = 0; i < floorstitle.length; i++) {
                                            if (i == floorstitle.length - 1) {
                                                floortaga += `
                                            <a href="javascript:;" class="last">${floorstitle[i]}</a>
                                            `;
                                            } else {
                                                floortaga += `
                                            <a href="javascript:;">${floorstitle[i]}</a>
                                            `;
                                            }

                                        }
                                    }
                                    if ((val.type === value + '_b') && countnum > 0 && countnum < 5) {
                                        countnum++;
                                        strinner +=
                                            `<li class="narrow"><a href="details.html?id=${val.id}"><img class="lazy" data-original="${val.url}" width="220" height="191"></a></li>
                                    `;
                                    } else if ((val.type === value + '_b') && countnum === 0) {
                                        countnum++;
                                        strinner += `<div class="col1"><a href="details.html?id=${val.id}"><img class="lazy" data-original="${val.url}" width="234" height="383"></a></div><div class="col2">
                                    <ul>`;
                                    } else if ((val.type === value + '_b') && countnum === 5) {
                                        countnum++;
                                        strinner += `</ul>
                                    </div>
                                    <div class="col3"><a href="details.html?id=${val.id}"><img class="lazy" data-original="${val.url}" width="246" height="461"></a></div>
                                    `;
                                    } else if ((val.type === value + '_b') && countnum === 6) {
                                        countnum++;
                                        strinner += ` <div class="logo-list clearfix"> <a href="javascript:;"><img class="lazy" data-original="${val.url}" height="52"></a> </div>`;
                                    }
                                    if (countnum > 6) {
                                        break;
                                    }
                                }
                                strhtml += `
                                <div class="floorTitle ">
                                    <h2><a href="javascript:;"><i>F${i + 1}</i>${floortitle}</a></h2>
                                    <span class="keyword">
                                       ${floortaga}
                                    </span>
                                </div>
                            <div class="floorCon floorLayout3">
                                <div class="floorSide"><a href="javascript:;"> <img
                                            class="lazy" data-original="${floortitleurl}" width="275"
                                            height="463"></a></div>
                
                                <div class="floorMain">
                                    ${strinner}
                                </div>
                            </div>
                            </section>
                            `;
                            }
                            _this.$floorwrap.html(strhtml);
                            _this.rendcart(data);
                            _this.stairs();
                            $("img.lazy").lazyload({ effect: "fadeIn" }).removeClass("lazy");
                        });
                    }


                    // 轮播图效果
                    this.slide = function () {
                        _this.$picul = $('.bannerSlider .bSlider');
                        _this.$piclist = $('.bannerSlider .bSlider li');

                        this.timer = null;
                        this.bstop = true;
                        this.currentindex = 0;
                        // 前后克隆一张图
                        this.firstpic = $('.bannerSlider .bSlider li:first');
                        this.lastpic = $('.bannerSlider .bSlider li:last');
                        this.firstpic.clone(true, true).appendTo(this.$picul);
                        this.lastpic.clone(true, true).prependTo(this.$picul);
                        // 给ul设置宽度
                        this.liwidth = this.$piclist[0].offsetWidth;
                        this.$picul.width($('.bannerSlider .bSlider li').length * this.liwidth);
                        this.$picul.css({ 'left': -this.liwidth });
                        // 给按钮添加点击事件，图片运动
                        this.$btnlist.on('click', function () {
                            _this.currentindex = $(this).index('.bannerSlider .bDot ul li');
                            _this.tabswitch();
                        });
                        // 左右箭头事件
                        this.$arrowRight.on('click', function () {
                            if (_this.bstop) {
                                _this.bstop = false;
                                _this.currentindex++;
                                _this.tabswitch();
                            }

                        });
                        this.$arrowLeft.on('click', function () {
                            if (_this.bstop) {
                                _this.bstop = false;
                                _this.currentindex--;
                                _this.tabswitch();
                            }
                        });
                        this.$arrowRight.hover(function () {
                            $(this).animate({ opacity: 0.7 }, "fast");
                        }, function () {
                            $(this).animate({ opacity: 0.3 }, "fast");
                        });
                        this.$arrowLeft.hover(function () {
                            $(this).animate({ opacity: 0.7 }, "fast");
                        }, function () {
                            $(this).animate({ opacity: 0.3 }, "fast");
                        });

                        // 自动轮播
                        let timer = setInterval(function () {
                            _this.$arrowRight.trigger('click');
                        }, 5000)
                        // 左右箭头隐藏显示
                        this.$banner.hover(function () {
                            _this.$arrowLeft.show();
                            _this.$arrowRight.show();
                            _this.$arrowRight.css({ opacity: 0 }).animate({ opacity: 0.3 }, "fast");
                            _this.$arrowLeft.css({ opacity: 0 }).animate({ opacity: 0.3 }, "fast");
                            // console.log(2);
                            clearInterval(timer);
                        }, function () {
                            _this.$arrowLeft.hide();
                            _this.$arrowRight.hide();
                            timer = setInterval(function () {
                                // console.log(1);
                                _this.$arrowRight.trigger('click');
                            }, 5000)
                        });

                    };
                    this.tabswitch = function () {

                        // 按钮变化
                        if (this.currentindex === this.$btnlist.length) {
                            this.$btnlist.eq(0).addClass('on').siblings('.bannerSlider .bDot ul li').removeClass('on');
                        } else if (this.currentindex < 0) {
                            this.$btnlist.eq(this.$btnlist.length - 1).addClass('on').siblings('.bannerSlider .bDot ul li').removeClass('on');
                        }
                        else {
                            this.$btnlist.eq(this.currentindex).addClass('on').siblings('.bannerSlider .bDot ul li').removeClass('on');
                        }
                        // 图片移动
                        this.$picul.stop(true).animate({ left: -this.liwidth * (this.currentindex + 1) }, function () {
                            if (_this.currentindex === _this.$btnlist.length) {
                                _this.$picul.css({ 'left': -_this.liwidth });
                                _this.currentindex = 0;
                            }
                            if (_this.currentindex < 0) {
                                _this.$picul.css({ 'left': -_this.liwidth * _this.$btnlist.length });
                                _this.currentindex = _this.$btnlist.length - 1;
                            }
                            _this.bstop = true;
                        });
                    };
                    // 顶部悬浮
                    this.topsus = function () {
                        $(window).on('scroll', function () {
                            let $top = $(window).scrollTop();
                            if ($top > 90) {
                                _this.$header.addClass('header_fixed');
                            } else {
                                _this.$header.removeClass('header_fixed');
                            }
                        });
                    };
                    // 楼梯效果
                    this.stairs = function () {
                        _this.$floor = $('.floor');
                        let $top = $(window).scrollTop();
                        if ($top < 700) {
                            _this.$floorguide.hide();
                            _this.$goTop.hide();
                        } else {
                            _this.$floorguide.show();
                            _this.$goTop.show();
                        }
                        // 滚动滚轮显示楼梯/楼层对应楼梯显示
                        $(window).on('scroll', function () {
                            let $top = $(this).scrollTop();
                            if ($top < 200) {
                                _this.$floorguide.hide();
                                _this.$goTop.hide();
                            } else {
                                _this.$floorguide.show();
                                _this.$goTop.show();
                            };
                            _this.$floor.each(function (index) {
                                let $floortop = _this.$floor.eq(index).offset().top;
                                if ($floortop > $top) {
                                    _this.$floorguideli.removeClass('current');
                                    _this.$floorguideli.eq(index).addClass('current');
                                    return false;
                                }
                            });
                        });
                        // 回到顶部
                        this.$goTop.on('click', function () {
                            $('html,body').animate({
                                scrollTop: 0
                            });
                        });
                        // 点击楼梯跳转楼层
                        this.$floorguideli.on('click', function () {
                            $(this).addClass('current').siblings("a").removeClass('current');
                            let $floortop = _this.$floor.eq($(this).index()).offset().top - 50;
                            $('html,body').animate({
                                scrollTop: $floortop
                            });
                        });
                    };
                    //元素悬浮显示隐藏(可传参)
                    this.susshow = function (pare, child) {
                        pare.hover(function () {
                            $(this).children(child).show();
                        }, function () {
                            $(this).children(child).hide();
                        });
                    }
                    //元素悬浮添加删除类名(可传参)
                    this.susclas = function (pare, clas, child) {
                        let kid;
                        pare.hover(function () {
                            kid = child ? pare.eq($(this).index()).children(child) : pare.eq($(this).index());
                            kid.addClass(clas);
                        }, function () {
                            kid.removeClass(clas);
                        });
                    }
                    // 城市切换
                    this.citychange = function () {
                        this.$citytab.children('span').hover(function () {
                            $(this).addClass('active').siblings('span').removeClass('active');
                            _this.$citylist.eq($(this).index()).addClass('active').siblings('div').removeClass('active')
                        });
                        this.$citytag.on('click', function () {
                            _this.$cityname.html($(this).html() + '<s></s>');
                        });
                    }
                    // 首页购物车显示消失
                    this.cartshow = function () {
                        this.$shoppingcart.hover(function () {
                            _this.$shoppinglist.show().stop().animate({ opacity: 1 });
                        }, function () {
                            _this.$shoppinglist.stop().animate({ opacity: 0 }, function () {
                                $(this).hide();
                            });
                        });
                    }
                    //取cookie渲染购物车
                    this.rendcart = function (database) {
                        if ($.cookie('loginname')) {
                            if ($.cookie('cookieid') && $.cookie('cookienum')) {
                                var idarr = $.cookie('cookieid').split(',');
                                var numarr = $.cookie('cookienum').split(',');
                                var count = 0;
                                var num = 0;
                                for (let i = 0; i < idarr.length; i++) {
                                    for (let value of database) {
                                        if (value.id == idarr[i]) {
                                            num += numarr[i];
                                            count += value.price * 100 * numarr[i];
                                            break;
                                        }
                                    }
                                }
                                this.$totlenum.children('b').html(Number(num));
    
                                this.$totleprice.html(count / 100 + '￥');
                            };
                        }else{
                            this.$shopbtn.on('click',function(){
                                return false;
                            })
                        }                
                    };


                    // 执行
                    this.topsus();
                    this.citychange();
                    this.indexrender();
                    this.cartshow();
                    // 顶部工具栏
                    this.susclas(this.$topflli, 'current');
                    this.susclas(this.$topfrli, 'current');
                    // 导航菜单
                    this.susclas(this.$cataitem, 'current');
                    this.susshow(this.$cataitem, '.subItem');
                }
                init();
            });

        });
    });
})

